<template>
    <div ref="Orders" style=" width: calc(100vh - 235px); height: calc(100vh - 380px) ;margin-top:-50px"></div>
</template>
  
<script>
import * as echarts from 'echarts/core';
import {
    DatasetComponent,
    GridComponent,
    VisualMapComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    DatasetComponent,
    GridComponent,
    VisualMapComponent,
    BarChart,
    CanvasRenderer
]);
export default {
    data() {
        return {};
    },
    mounted() {
        this.drawpie();
    },
    methods: {
        drawpie() {
            var chartDom = this.$refs.Orders;
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        [10, 100000, '一月'],
                        [57.1, 120000, '二月'],
                        [80, 180000, '三月'],
                        [70, 170000, '四月'],
                        [89.7, 100000, '五月'],
                        [68.1, 125000, '六月'],
                        [50, 130000, '七月'],
                        [60, 150000, '八月'],
                        [32.7, 123540, '九月'],
                        [60, 152000, '十月'],
                        [90, 190000, '十一月'],
                        [100, 254000, '十二月'],
                    ]
                },
                grid: { containLabel: true },
                xAxis: { name: '利润' },
                yAxis: { type: 'category' },
                visualMap: {
                    orient: 'horizontal',
                    left: 'center',
                    min: 10,
                    max: 100,
                    text: ['High Score', 'Low Score'],
                    // Map the score column to color
                    dimension: 0,
                    inRange: {
                        color: ['#65B581', '#FFCE34', '#FD665F']
                    }
                },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: 'amount',
                            // Map the "product" column to Y axis
                            y: 'product'
                        }
                    }
                ]
            };

            myChart.setOption(option);

        },
    },
};
</script>
  
<style></style>